<template>
  <div>
    <h4>pageRouter: #/attrsListeners</h4>
    <br />
    <h4>$attrs 与$ listeners</h4>
    <pre style="font-size: 16px">
适用场景：祖先传递数据给子孙
设置批量向下传属性$attrs和 $listeners
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件
</pre
    >
    <br />
    <input type="text" v-model="text" />{{ text }}<br />
    <child1
      msg="lalala"
      msg1="diudiu"
      :text="text"
      @some-event="onSomeEvent"
      @childOneInputEvent="changeText($event)"
    >
    </child1>
    <br />
    <a
      href="https://vue3js.cn/interview/vue/communication.html#%E4%B8%89%E3%80%81%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1%E7%9A%84%E6%96%B9%E6%A1%88"
      target="_blank"
      rel="noopener noreferrer"
      >$attrs 与$ listeners</a
    >
  </div>
</template>
<script>
import child1 from './components/child1.vue'

export default {
  name: 'attrsListeners',
  components: { child1 },
  provide() {
    return {
      foo: 'i am provide注册的in attrs&listerners组件'
    }
  },
  data() {
    return { text: '测试sync修饰符' }
  },
  methods: {
    onSomeEvent($event) {
      console.log('onsome' + ' ' + $event)
    },
    changeText(e) {
      this.text = e
      return '修改成功'
    }
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped></style>
